<template>
    <div>
      <el-button type="primary" @click="handleAdd">添加用户</el-button>
      <el-table :data="tableData" style="width: 100%" >
        <el-table-column label="角色名称">
          <template #default="scope">
            <div>{{scope.row.role.roleName}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column label="操作" >
          <template #default="scope">
            <el-button type="primary"
                       round
                       @click=handleUpdate(scope.row)
                       :disabled="scope.row.is_default?true:false"
            >更新</el-button>
            <el-popconfirm
                title="确认删除此用户?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="handledelete(scope.row)"
            >
              <template #reference>
                <el-button type="danger"
                           round
                           :disabled="scope.row.is_default?true:false"
                >删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
<!--      添加用户对话框-->
      <el-dialog v-model="dialogVisible" title="添加用户"  width="30%">
        <el-form
            ref="addFormRef"
            :model="addForm"
            :rules="rules"
            label-width="80px"
            class="demo-ruleForm"
            status-icon
        >
          <el-form-item label="用户名:" prop="username">
            <el-input v-model="addForm.username"/>
          </el-form-item>
          <el-form-item label="密码:" prop="password">
            <el-input v-model="addForm.password" type="password"/>
          </el-form-item>
          <el-form-item label="用户角色" prop="roleId">
            <el-select v-model="addForm.roleId" class="m-2"
                       placeholder="请选择用户角色"
                       size="large"
                       style="width:100%"
            >
              <el-option v-for="item in rolelist" :key="item.id"
                         :label="item.roleName" :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAddConfirm()">
          确认
        </el-button>
      </span>
        </template>
      </el-dialog>
<!--      更新用户信息对话框-->
      <el-dialog v-model="dialogUpdateVisible" title="更新用户信息" width="30%">
        <el-form
            ref="updateFormRef"
            :model="updateForm"
            :rules="rules"
            label-width="80px"
            class="demo-ruleForm"
            status-icon
        >
          <el-form-item label="用户名:" prop="username">
            <el-input v-model="updateForm.username"/>
          </el-form-item>
          <el-form-item label="密码:" prop="password">
            <el-input v-model="updateForm.password"/>
          </el-form-item>
          <el-form-item label="角色:" prop="roleId">
            <el-select v-model="updateForm.roleId" class="m-2"
                       placeholder="请选择用户角色"
                       size="large"
                       style="width:100%"
            >
              <el-option v-for="item in rolelist" :key="item.id"
                         :label="item.roleName" :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogUpdateVisible = false">取消</el-button>
        <el-button type="primary" @click="handleUpdateConfirm(updateFormRef)">
          确认
        </el-button>
      </span>
        </template>
      </el-dialog>
    </div>
</template>

<script setup>
import {ref,onMounted,reactive} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

//渲染表格
const tableData = ref([])
const rolelist = ref([])
//获取角色表
onMounted(()=>{
  getList()
  getRoleList()
})
const getList=async ()=>{
  var res=await axios.get("/adminapi/users")
  tableData.value=res.data
}
const getRoleList=async ()=>{
  var res1=await axios.get("/adminapi/roles")
  rolelist.value=res1.data
}

//添加对话框显示
const dialogVisible=ref(false)
const addFormRef=ref()
const addForm=reactive({
  username:"",
  password:"",
  roleId:"",
})
const rules=reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
  roleId: [
    { required: true, message: '请选择用户角色', trigger: 'blur' },
  ],
})
const handleAdd=()=>{
  dialogVisible.value=true;
}

//确认添加按钮
const handleAddConfirm= ()=>{
  addFormRef.value.validate(async(valid)=>{
    if(valid){
      dialogVisible.value=false
      await axios.post(`/adminapi/users`,addForm)
      await getList()
      ElMessage({
        message:"添加成功！",
        type:"success"
      })
      addForm.username=""
      addForm.password=""
      addForm.roleId=""
    }else{
      console.log("添加失败")
    }
  })
}

//更新权限内容提示框
const dialogUpdateVisible=ref(false)
const updateFormRef=ref()
const currentItem=ref({})
const updateForm=reactive({
  username:"",
  password:"",
  roleId:""
})
//更新按钮
const handleUpdate =(item)=>{
  dialogUpdateVisible.value=true
  updateForm.username=item.username
  updateForm.password=item.password
  updateForm.roleId=item.roleId
  currentItem.value=item
}
//确认更新
const handleUpdateConfirm=async ()=>{
  dialogUpdateVisible.value=false
  await axios.put(`/adminapi/users/${currentItem.value.id}`,updateForm)
  await getList()
  ElMessage({
    message:"更新成功！",
    type:"success"
  })
}

//删除用户
const handledelete=async (item)=>{
  await axios.delete(`/adminapi/users/${item.id}`,)
  await getList()
  ElMessage({
    message:"删除成功！",
    type:"success"
  })
}

</script>

<style scoped>

</style>